<{include file="public/header.html"}> 
<script type='text/javascript'>var type="hot";</script>
	<!--问答 首页-->
	<header class="title-fixed w100">
		<div class="title bj-white">
			<a href="/" class="title-top title-left"><img src="<{$style_dir}>/img/logo.png" style="width: 40px;"/></a>
			<div class="login-head title-right">
                        <{if !$uinfo}>
                        <a href="<{eval url('account/login')}>" class=" title-right title-btn i-title">登录</a>
                        <{else}>
                        <a href="<{eval url('account')}>" class="i-title head">
                            <img src="<{$uinfo['head_img']}>"/>
                        </a>
                        <{/if}>
			</div>
            <div class="wd-search fr f-cb">
                <input class="fl" type="text" id="search-text" value="<{$search_word}>" readonly="readonly" placeholder="搜索相关问答" data-search-val="<{$keyword}>" oninput="if(value.length>8)value=value.slice(0,8)"/>
                <button class="iconfont" id="wenda-search-btn">&#xe613;</button>
			</div>
		</div>
	</header>
<!--此处放banner-->
<section class="banner-box" style="background: #ddd">
    <div class="index_banner main_visual">
        <div class="banner-con main_image">
            <ul style="width: 414px; overflow: visible;">
                <{foreach from=$banner_list item=val}>
                <li>
                    <a href="<{$val['banner_link']}>"><img src="<{$val['banner_img']}>"></a>
                    <{if $val['title']}>
                    <span><{$val['title']}><b></b></span>
                    <{/if}>
                </li>
                <{/foreach}>
            </ul>
            <a class="btn-prev" id="btn-prev" href="javascript:;"><</a>
            <a class="btn-next" id="btn-next" href="javascript:;">></a>
        </div>
        <div class="focus flicking_con">
            <{foreach from=$banner_list item=val key=key}>
            <a <{if $key == 0}>class="current"<{/if}> href="javascript:;"></a>
            <{/foreach}>
        </div>
    </div>
</section>
	<div class="task-index mb60">

        <!-- 导航切换 -->
        <div class="task-nav-box">
            <div class="task-nav">
                <a class="active" data-cate="0" data-type="0">推荐</a>
                <a data-cate="1" data-type="1">理财任务</a>
                <a data-cate="2" data-type="2">注册任务</a>
                <a data-cate="3" data-type="3">区间理财</a>
                <a id="screenBtn" data-type="4">筛选 <font class="iconfont">&#xe633;</font></a>
            </div>
            <div class="task-list">
                <!--推荐列表-->
                <div class="list recommend list_0">
                    <ul id="content-list_0">

                    </ul>
                    <div class="loading" id="noresults_0" style="display: none;">
                        <a href="javascript:;" class="load-success empty-follow-data">没有任何数据哦</a>
                    </div>
                    <div class="loading" id="loading_0" style="display: none;">
                        <a class="/*pull-load*/ load-success" href="javascript:;">加载中...</a>
                    </div>
                    <div class="loading" id="nomoreresults_0" style="display: none;">
                        <a href="javascript:;" class="load-success nomore-load">已经到底啦~~~</a>
                    </div>
                </div>
                <!-- 理财任务列表-->
                <div class="list financial list_1" style="display: none">
                    <ul id="content-list_1">

                    </ul>
                    <div class="loading" id="noresults_1" style="display: none;">
                        <a href="javascript:;" class="load-success empty-follow-data">没有任何数据哦</a>
                    </div>
                    <div class="loading" id="loading_1" style="display: none;">
                        <a class="/*pull-load*/ load-success" href="javascript:;">加载中...</a>
                    </div>
                    <div class="loading" id="nomoreresults_1" style="display: none;">
                        <a href="javascript:;" class="load-success nomore-load">已经到底啦~~~</a>
                    </div>
                </div>
                <!--其他任务列表-->
                <div class="list others list_2" style="display: none">
                    <ul id="content-list_2">

                    </ul>
                    <div class="loading" id="noresults_2" style="display: none;">
                        <a href="javascript:;" class="load-success empty-follow-data">没有任何数据哦</a>
                    </div>
                    <div class="loading" id="loading_2" style="display: none;">
                        <a class="/*pull-load*/ load-success" href="javascript:;">加载中...</a>
                    </div>
                    <div class="loading" id="nomoreresults_2" style="display: none;">
                        <a href="javascript:;" class="load-success nomore-load">已经到底啦~~~</a>
                    </div>
                </div>
                <!--其他任务列表-->
                <div class="list others list_3" style="display: none">
                    <ul id="content-list_3">

                    </ul>
                    <div class="loading" id="noresults_3" style="display: none;">
                        <a href="javascript:;" class="load-success empty-follow-data">没有任何数据哦</a>
                    </div>
                    <div class="loading" id="loading_3" style="display: none;">
                        <a class="/*pull-load*/ load-success" href="javascript:;">加载中...</a>
                    </div>
                    <div class="loading" id="nomoreresults_3" style="display: none;">
                        <a href="javascript:;" class="load-success nomore-load">已经到底啦~~~</a>
                    </div>
                </div>
                <!--筛选列表-->
                <div class="list screen list_4" style="display: none" id="screenContent">
                    <ul id="content-list_4">

                    </ul>
                    <div class="loading" id="noresults_4" style="display: none;">
                        <a href="javascript:;" class="load-success empty-follow-data">没有任何数据哦</a>
                    </div>
                    <div class="loading" id="loading_4" style="display: none;">
                        <a class="/*pull-load*/ load-success" href="javascript:;">加载中...</a>
                    </div>
                    <div class="loading" id="nomoreresults_4" style="display: none;">
                        <a href="javascript:;" class="load-success nomore-load">已经到底啦~~~</a>
                    </div>
                </div>
            </div>
        </div>
        <!--筛选弹窗-->
        <div class="screen-popup" id="screenPopup">
            <div class="screen-box" style="display: none">
                <div id="screenBox"></div>

                <div class="btn-sure-reset f-cb">
                    <a href="javascript:;" onclick="search_screen();" class="fr btn-func btn-sure">确定</a><a class="fr btn-func btn-reset" href="javascript:;" onclick="reset_screen();">重置</a>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript" src="/static/js/jquery.touchSlider.js"></script>
<script type="text/javascript" src="/static/js/task_scrollpagination.js"></script>
<script type="text/javascript">

    $(function () {
        $(".main_image")[0] != undefined ? $(".main_image").banner_round() : '';
        var contentData = {'cate_id':0,'pageIndex':0};
        get_task_list(0,contentData);
    });

    // 导航切换
    var _taskNav = $('.task-nav');
    _taskNav.find('a').on('click',function () {
        var cate_id = $(this).attr('data-cate');
        var type = $(this).attr('data-type');
        if(type==4) {
            search_screen();
            $(this).addClass('active').siblings().removeClass('active');
            $('.list_'+type).fadeIn(200).siblings().fadeOut();
        }else{
            var contentData = {'cate_id':cate_id,'pageIndex':0};
            get_task_list(type,contentData);
            $(this).addClass('active').siblings().removeClass('active');
            $('.list_'+type).fadeIn(200).siblings().fadeOut();
            $("#screenBox").html("");
            creat_screen();
        }


    });

    // 筛选弹窗
    $('.task-nav-box .task-nav a:last-child').on('click',function () {

        if($("#screenBox").html()){
            $(".screen-popup").fadeIn();
            $('.screen-popup').children('#screen-box').show()
        }else{
            creat_screen();
            $(".screen-popup").fadeIn();
            $('.screen-popup').children('.screen-box').show()
        }

    });
    // 除指定区域外点击任何地方隐藏DIV，手机上失效
    $(document).click(function(e){
        if ($(e.target).find('.screen-box').length !== 0 ){
            if($(".screen-popup").css('display')=='block'){
                $(".screen-popup").hide();
            }
        }
    });

    // 筛选条件
    function li_clisc(ob) {
        ob.addClass('active').siblings().removeClass('active');
    }
    // 关闭筛选弹窗
    $('.icon-close').on('click',function () {
        $('#screenPopup').fadeOut();
    });
    function creat_screen() {
        $.ajax({
            url: "/task/search_list.html",
            async: false,
            type: "get",
            dataType: "json",
            success: function(res) {
                var cate_html='';
                $.each(res.data,function(item,cate) {
                    cate_html += '<div class="content">'+
                        '<h5>'+cate.name+'</h5>'+
                        '<ul class="f-cb" id="'+item+'">';
                    $.each(cate.data,function(key,val) {
                        cate_html += '<li data-id="'+key+'" onclick="li_clisc($(this))">'+val.word+'</li>'
                    });
                    cate_html += '</ul></div>';
                });
                $("#screenBox").html(cate_html);
            }
        });
    }
    function reset_screen() {
        creat_screen();
        $(".screen-popup").fadeIn();
        $('.screen-popup').children('.screen-box').show()
    }
    function search_screen() {
        var contentData = {'cate_id':0,'pageIndex':0};
        $("#content-list_4").html('');
        $.ajax({
            url: "/task/search_list.html",
            async: false,
            type: "get",
            dataType: "json",
            success: function(res) {
                $.each(res.data,function(item,cate) {
                    var data_id = $("#"+item).children(".active").attr('data-id');
                    contentData[item] = data_id?data_id:0;
                });
                get_task_list(4,contentData);
                $('#screenPopup').fadeOut();
            }
        });
    }


    var scrollPagination_obj = null;

    function get_task_list(type,contentData){
        var cate_id = contentData['cate_id'],pageIndex=contentData['pageIndex'];
        $("#content-list_"+type).scrollPagination({
            'contentPage': "/task/task_list.html",
            'contentData': contentData,
            'heightId': $("#content-list_"+type),
            'scrollTarget': $(window),
            'heightOffset': 0,
            'initLoad':function(){
                scrollPagination_obj = this;
            },
            'beforeLoad': function() { // before load function, you can display a preloader div
                $('#loading_'+type).fadeIn('fast');
                $('#loading_'+type).attr('scrollpagination','disabled');
            },
            'afterLoad': function(elementsLoaded) { // after loading content, you can use this function to animate your new elements
                //console.log(elementsLoaded);
                $('#loading_'+type).fadeOut('fast');
                $('#loading_'+type).attr('scrollpagination','enabled');
                if (elementsLoaded.length == 0) {
                    $('#nomoreresults_'+type).fadeIn('slow');
                    $('#content-list_'+type).stopScrollPagination();
                }else{
                    pageIndex = pageIndex + 1;
                }

                this.contentData.pageIndex = pageIndex;
                $(elementsLoaded).fadeInWithDelay();
                // 预期总收益展开收起
                var zs_toggle = $('.zs_toggle');
                zs_toggle.on('click',function () {
                    if($(this).hasClass('z-active')) {
                        $(this).removeClass('z-active').children('.iconfont').html('&#xe633;');
                        $(this).parents('.list-content').siblings('.earn-detail').hide();
                    }else{
                        $(this).addClass('z-active').children('.iconfont').html('&#xe951;');
                        $(this).parents('.list-content').siblings('.earn-detail').fadeIn();
                    }
                });
            }
        });
        $.fn.fadeInWithDelay = function() {
            var delay = 0;
            return this.each(function() {
                $(this).delay(delay).animate({
                    opacity: 1
                }, 200);
                delay += 100;
            });
        };
    }
</script>

<!--底部悬浮-->
<{include file="public/footer_banner.html"}>